<template>
  <div class="ApplicationForm">
    <div class="ApplicationForm-search">
      <el-select class="m-2" v-model="Hiddendisplay" placeholder="请选择你要做的操作" style="width: 200px">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <div v-if="Hiddendisplay == '检查内容'" class="ApplicationForm-tables">
      <div class="centertop">
        <span class="neirong">检查内容</span>
        <div
          class="centertoptitle"
          v-html="
            synthesizedata && synthesizedata.WeiHaiYinSuJianChaNeiRong.JianChaNeiRong != null
              ? synthesizedata.WeiHaiYinSuJianChaNeiRong.JianChaNeiRong.replace(/\n/g, '<br>')
              : ''
          "
        ></div>
      </div>
      <div class="centerbottom">
        <span class="neirong">目标疾病</span>
        <div
          class="centertoptitle"
          v-html="
            synthesizedata && synthesizedata.WeiHaiYinSuJianChaNeiRong.MuBiaoJiBing != null
              ? synthesizedata.WeiHaiYinSuJianChaNeiRong.MuBiaoJiBing.replace(/\n/g, '<br>')
              : ''
          "
        ></div>
      </div>
    </div>

    <div v-if="Hiddendisplay == '监护依据'" class="ApplicationFormtableSr">
      <!-- :request-api="getTableList" -->
      <ProTable
        :row-key="row => row.JianHuYiJuID"
        ref="proTable"
        :publicsb="ApplicationFormtableSr"
        :request-auto="false"
        :columns="Guardianshipbasis"
        :data="synthesizedata && synthesizedata.WeiHaiYinSuJianHuYiJu.length != 0 ? synthesizedata.WeiHaiYinSuJianHuYiJu : ''"
        :showhidden="showhidden"
        :search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
        @darg-sort="dargSort"
        :yesornooperation="yesornooperation"
        highlight-current-row
      >
        <!-- Expand -->
        <template #tableHeader>
          <el-button type="primary" :icon="CirclePlus" @click="addtutelage">添加</el-button>
        </template>
        <template #expand="scope">
          {{ scope.row }}
        </template>
        <!-- 表格操作 -->
        <template #operation="scope">
          <el-tooltip class="box-item" effect="dark" content="编辑" placement="top">
            <el-button type="primary" link :icon="EditPen" @click="compile(scope)"></el-button>
          </el-tooltip>
          <el-tooltip class="box-item" effect="dark" content="删除" placement="top">
            <el-button type="primary" link :icon="Delete" @click="deletes(scope)"></el-button>
          </el-tooltip>
        </template>
      </ProTable>
    </div>

    <div v-if="Hiddendisplay == '国标内容'" class="ApplicationFormtableFor">
      <!-- :request-api="getTableList" -->
      <div class="internationalleft">
        <div class="ApplicationForm-searchtop">
          <span class="ApplicationForm-search-span-lstop">|</span>
          <span class="ApplicationForm-search-spantop">省平台标准项目</span>
        </div>
        <div class="ApplicationFormtableFW">
          <ProTable
            :row-key="row => row.id"
            ref="proTable"
            :request-auto="false"
            :publicsb="ApplicationFormtableFW"
            :columns="standarddata"
            :yesornooperation="yesorno"
            :data="
              synthesizedata && synthesizedata.WeiHaiYinSuGuoBiaoXiangMu.length != 0
                ? synthesizedata.WeiHaiYinSuGuoBiaoXiangMu
                : ''
            "
            :showhidden="showhidden"
            :search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
            @darg-sort="dargSort"
            highlight-current-row
          >
            <!-- Expand -->
            <template #expand="scope">
              {{ scope.row }}
            </template>
          </ProTable>
        </div>
      </div>
      <div class="internationalleft">
        <div style="display: flex; justify-content: space-between">
          <div>
            <div class="ApplicationForm-searchtop">
              <span class="ApplicationForm-search-span-lstop">|</span>
              <span class="ApplicationForm-search-spantop">对应本地组合项目</span>
            </div>
          </div>
          <div><el-button type="primary" :icon="CirclePlus" @click="addproject('add')">添加项目</el-button></div>
        </div>

        <div class="ApplicationFormtablesks">
          <ProTable
            ref="proTable"
            :request-auto="false"
            :columns="localcombination"
            :publicsb="ApplicationFormtablesks"
            :data="allLocalitem"
            :yesornooperation="duiyingxiangmu"
            :showhidden="showhidden"
            :search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
            @darg-sort="dargSort"
            highlight-current-row
          >
            <!-- Expand -->
            <template #expand="scope">
              {{ scope.row }}
            </template>
            <!-- 表格操作 -->
            <template #operation="scope">
              <el-tooltip class="box-item" effect="dark" content="删除" placement="top">
                <el-button type="primary" link :icon="Delete" @click="nationaldelete(scope)"></el-button>
              </el-tooltip>
            </template>
          </ProTable>
        </div>
      </div>
      <div class="internationalright">
        <div style="display: flex; justify-content: space-between">
          <div>
            <div class="ApplicationForm-searchtop">
              <span class="ApplicationForm-search-span-lstop">|</span>
              <span class="ApplicationForm-search-spantop">综合分析结果</span>
            </div>
          </div>
          <div><el-button type="primary" @click="analysisbysynthesis">综合分析</el-button></div>
        </div>

        <div
          class="tableBiaozhun"
          v-html="
            m_StringValue != '' && m_StringValue != undefined && m_StringValue != null ? m_StringValue.replace(/\n/g, '<br>') : ''
          "
        ></div>
      </div>
    </div>
    <AddDialogFormGroup @add-on-submit="addOnSubmit" ref="addDialogFormRef" @refresh="getTableData()" />
  </div>
</template>

<script setup lang="ts">
import AddDialogFormGroup from "@/views/DataMaintenance/IntegratedProject/components/TagProject/components/addDialogFormGroup.vue";
import { EditPen, Delete } from "@element-plus/icons-vue";
import { reactive, ref, watch, computed } from "vue";
import ProTable from "@/components/tablepublic/index.vue";
import { CirclePlus } from "@element-plus/icons-vue";
import { dataWeihu } from "@/stores/datamaintenance/datatending";
import {
  PostWeiHaiYinSuJianHuYiJuAddport,
  PutWeiHaiYinSuJianHuYiJuTiaoZhengShunXuport,
  PutWeiHaiYinSuJianHuYiJuUpdateport,
  DeleteWeiHaiYinSuJianHuYiJuDeleteport,
  PostGuoBiaoDuiYinBenDiItemAddport,
  DeleteGuoBiaoDuiYinBenDiItemDeleteport,
  GetFenXiWeiHaiYinSuport
} from "@/api/modules/user";

import { useIntegratedProject } from "@/stores/modules/integratedProject";
const m_StringValue = ref<string>();
const yesornooperation = ref("监护依据");
const yesorno = ref("省平台标准项目");
const duiyingxiangmu = ref("对应本地组合项目");
const synthesizedata = ref<any>();
const ApplicationFormtableFW = ref("ApplicationFormtableFW");
const ApplicationFormtablesks = ref("ApplicationFormtablesks");
import { ElMessage, ElMessageBox } from "element-plus";
const allLocalitem = ref<any>([]);
const synthesize = computed(() => {
  return dataWeihu().GetSelWeiHaiYinSuData;
});
const integratedproject = computed(() => {
  return dataWeihu().Correspondinglocal;
});
const ApplicationFormtableSr = ref("ApplicationFormtableSr");
watch(
  synthesize,
  () => {
    synthesizedata.value = synthesize.value;
  },
  { deep: true }
);
watch(
  integratedproject,
  () => {
    allLocalitem.value = integratedproject.value;
  },
  { deep: true }
);
const addtutelage = () => {
  ElMessageBox.prompt("输入监护依据名称", "添加", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    inputPattern: /^(?!\s*$).+/,
    inputErrorMessage: "输入不可为空"
  }).then(({ value }) => {
    if (dataWeihu().sole == "") {
      return ElMessage({ type: "error", message: `请先选择危害因素` });
    } else {
      const data = {
        strWeiHaiYinSuId: dataWeihu().sole,
        strJianHuYiJuMingCheng: value
      };
      PostWeiHaiYinSuJianHuYiJuAddport(data).then((res: any) => {
        console.log(res);
        if (res.Success == 0) {
          synthesizedata.value.WeiHaiYinSuJianHuYiJu.push(res.Data);
          ElMessage({ type: "success", message: `添加成功` });
        }
      });
    }
  });
};

const addDialogFormRef = ref();

const addproject = (type: any) => {
  if (dataWeihu().Provincialplatform.ZuHeXiangMuBianMa == "" || dataWeihu().Provincialplatform.ZuHeXiangMuBianMa == undefined) {
    return ElMessage({ type: "error", message: `请先选择省平台标准项目` });
  } else {
    addDialogFormRef.value.openDialog(type);
  }
};

// 综合分析
const analysisbysynthesis = () => {
  if (dataWeihu().sole == "") {
    return ElMessage({ type: "error", message: `请先选择危害因素` });
  } else {
    const data = {
      strWeiHaiYinSuId: dataWeihu().sole,
      strGangQi: dataWeihu().arbitrage
    };
    GetFenXiWeiHaiYinSuport(data).then((res: any) => {
      console.log(res);
      if (res.Success == 0) {
        m_StringValue.value = res.Data.m_StringValue;
      }
    });
  }
};

const getTableData = () => {
  useIntegratedProject().getBaoHanZuHeXiangMuSel();
};

const addOnSubmit = (item: any) => {
  console.log(allLocalitem.value);
  console.log(item);
  console.log(dataWeihu().Provincialplatform.ZuHeXiangMuBianMa);

  let arrs = [] as any;
  if (item.listRight.length != 0) {
    item.listRight.forEach((item: any) => {
      console.log(item);
      arrs.push(item.key);
    });
  }
  if (allLocalitem.value.length != 0) {
    allLocalitem.value.forEach(item => {
      arrs.push(item.ZuHeXiangMuID);
    });
  }
  const data = {
    strGuoBiaoItemId: dataWeihu().Provincialplatform.ZuHeXiangMuBianMa,
    listBenDiItemId: arrs
  };
  PostGuoBiaoDuiYinBenDiItemAddport(data).then((res: any) => {
    console.log(res);
    if (res.Success == 0) {
      allLocalitem.value = res.Data;
      addDialogFormRef.value.closeDialog();
      ElMessage({ type: "success", message: `添加成功` });
    }
  });
};

// 国标对应组合项目删除
const nationaldelete = (scope: any) => {
  ElMessageBox.confirm("确认删除吗？", "温馨提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    const data = {
      strGuoBiaoItemId: dataWeihu().Provincialplatform.ZuHeXiangMuBianMa,
      strBenDiItemId: scope.row.ZuHeXiangMuID
    };
    DeleteGuoBiaoDuiYinBenDiItemDeleteport(data).then((res: any) => {
      if (res.Success == 0) {
        allLocalitem.value.forEach((item: any, index: number) => {
          if (scope.row.ZuHeXiangMuID == item.ZuHeXiangMuID) {
            allLocalitem.value.splice(index, 1);
          }
        });
        ElMessage({ type: "success", message: `删除成功` });
      }
    });
  });
};

// 监护依据删除
const deletes = (scope: any) => {
  console.log(scope.row);
  ElMessageBox.confirm("确认删除吗？", "温馨提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    const data = {
      strWeiHaiYinSuId: scope.row.WeiHaiYinSuID,
      strJianHuYiJuID: scope.row.JianHuYiJuID,
      strJianHuYiJuMingCheng: scope.row.JianHuYiJuMingCheng,
      iShunXu: scope.row.ShunXu
    };
    DeleteWeiHaiYinSuJianHuYiJuDeleteport(data).then((res: any) => {
      console.log(res);
      if (res.Success == 0) {
        synthesizedata.value.WeiHaiYinSuJianHuYiJu.forEach((item: any, index: number) => {
          console.log(item);
          if (item.JianHuYiJuID == res.Data) {
            synthesizedata.value.WeiHaiYinSuJianHuYiJu.splice(index, 1);
          }
        });
        ElMessage({ type: "success", message: `删除成功` });
      }
    });
  });
};

// 监护依据编辑
const compile = (scope: any) => {
  console.log(scope.row);
  ElMessageBox.prompt("输入监护依据名称", "编辑", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    inputPattern: /^(?!\s*$).+/,
    inputErrorMessage: "输入不可为空",
    inputValue: scope.row.JianHuYiJuMingCheng // 设置输入框的初始值
  }).then(({ value }) => {
    console.log(value);

    if (dataWeihu().sole == "") {
      return ElMessage({ type: "error", message: `请先选择危害因素` });
    } else {
      const data = {
        strWeiHaiYinSuId: scope.row.WeiHaiYinSuID,
        strJianHuYiJuID: scope.row.JianHuYiJuID,
        strJianHuYiJuMingCheng: value,
        iShunXu: scope.row.ShunXu
      };
      PutWeiHaiYinSuJianHuYiJuUpdateport(data).then((res: any) => {
        if (res.Success == 0) {
          synthesizedata.value.WeiHaiYinSuJianHuYiJu.forEach((item: any, index: number) => {
            console.log(item);
            if (item.JianHuYiJuID == res.Data.JianHuYiJuID) {
              synthesizedata.value.WeiHaiYinSuJianHuYiJu[index] = res.Data;
            }
          });
          ElMessage({ type: "success", message: `修改成功` });
        }
      });
    }
  });
};

const Hiddendisplay = ref<string>("检查内容");
// 控制分页显示隐藏
const showhidden = ref<boolean>(false);
const proTable = ref();

const options = [
  {
    value: "检查内容",
    label: "检查内容"
  },
  {
    value: "监护依据",
    label: "监护依据"
  },
  {
    value: "国标内容",
    label: "国标内容"
  }
];

// 表格配置项
const standarddata = reactive<any>([
  { type: "index", label: "序号", width: 80 },
  { prop: "ZuHeXiangMuMingCheng", label: "国标组合项目名称" }
]);
const Guardianshipbasis = reactive<any>([
  {
    // 加上 sort 就获取不到当前行的数据
    type: "sort",
    label: "排序",
    width: 80
  },
  { type: "index", label: "序号", width: 80 },
  { prop: "JianHuYiJuMingCheng", label: "监护依据名称" },
  { prop: "operation", label: "操作", fixed: "right", width: 150 }
]);

// 调序
const dargSort = (item: any) => {
  console.log(item);
  const data = {
    strWeiHaiYinSuId: item.removedItem.WeiHaiYinSuID,
    strJianHuYiJuID: item.removedItem.JianHuYiJuID,
    iTiaoZhengQianShunXu: item.removedItem.ShunXu,
    iTiaoZhengHouShunXu: item.newIndex + 1
  };
  PutWeiHaiYinSuJianHuYiJuTiaoZhengShunXuport(data).then((res: any) => {
    console.log(res);
  });
};

const localcombination = reactive<any>([
  { type: "index", label: "序号", width: 80 },
  { prop: "ZuHeXiangMuMingCheng", label: "本地组合项目名称" },
  { prop: "operation", label: "操作", fixed: "right", width: 80 }
]);
</script>

<style scoped lang="scss">
.ApplicationForm {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .ApplicationForm-search {
    height: 25px;
    padding: 10px 20px;
    background-color: white;
    border-radius: 5px;
    .ApplicationForm-search-span-ls {
      font-size: larger;
      font-weight: 900;
      line-height: 0;
      color: #239487;
    }
    .ApplicationForm-search-span {
      margin-left: 5px;
      color: #239487;
    }
  }
  .ApplicationForm-tables {
    box-sizing: border-box;
    height: calc(100vh - 280px);
    padding: 10px;
    margin-top: 5px;
    background-color: white;
    .centertop {
      display: flex;
      flex-direction: column;
      height: 49%;
    }
    .centerbottom {
      display: flex;
      flex-direction: column;
      height: 49%;
      margin-top: 2%;
    }
    .neirong {
      flex-basis: 10%;
      color: green;
    }
    .centertoptitle {
      box-sizing: border-box;
      flex: 1;
      flex-basis: 90%; /* 第二个盒子占据百分之90的宽度 */
      width: 100%;
      padding: 0 10px;
      overflow: auto;
      border: solid 1px #b6b7b7;
      border-radius: 10px;
    }
  }
  .ApplicationFormtableSr {
    box-sizing: border-box;
    height: calc(100vh - 280px);
    padding: 10px;
    margin-top: 5px;
    background-color: white;
    .centertop {
      display: flex;
      flex-direction: column;
      height: 49%;
    }
    .centerbottom {
      display: flex;
      flex-direction: column;
      height: 49%;
      margin-top: 2%;
    }
    .neirong {
      flex-basis: 10%;
      color: green;
    }
    .centertoptitle {
      box-sizing: border-box;
      flex: 1;
      flex-basis: 90%; /* 第二个盒子占据百分之90的宽度 */
      width: 100%;
      padding: 0 10px;
      overflow: auto;
      border: solid 1px #b6b7b7;
      border-radius: 10px;
    }
  }
  .ApplicationFormtableFor {
    height: calc(100vh - 280px);
    margin-top: 5px;
    background-color: white;
    .internationalleft {
      height: 33%;
      background-color: white;
      .ApplicationForm-searchtop {
        height: 20px;
        padding: 5px 20px;
        background-color: white;
        border-radius: 5px;
        .ApplicationForm-search-span-lstop {
          font-size: larger;
          font-weight: 900;
          line-height: 0;
          color: #239487;
        }
        .ApplicationForm-search-spantop {
          margin-left: 5px;
          color: #239487;
        }
      }
      .ApplicationFormtableFW {
        height: 85%;

        // height: calc(100vh - 765px);
      }
      .ApplicationFormtablesks {
        height: 85%;
      }
    }
    .internationalleft:nth-child(2) {
      margin-top: 1%;
    }
    .internationalright {
      height: 32%;
      margin-top: 1%;
      background-color: white;
      .ApplicationForm-searchtop {
        height: 20px;
        padding: 5px 20px;
        background-color: white;
        border-radius: 5px;
        .ApplicationForm-search-span-lstop {
          font-size: larger;
          font-weight: 900;
          line-height: 0;
          color: #239487;
        }
        .ApplicationForm-search-spantop {
          margin-left: 5px;
          color: #239487;
        }
      }
      .tableBiaozhun {
        box-sizing: border-box;
        height: 80%;
        padding: 10px;
        margin-top: 5px;
        overflow: auto;
        border: solid 1px #b6b7b7;
        border-radius: 10px;
      }
    }
  }
}
</style>
